<style lang="scss" scoped>
  @import "../utils/base.scss";
	.demo-drawer-footer{
		width: 100%;
		// position: absolute;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		background: #fff;
	}
	.myText{
		max-width: 200px;
		max-height: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
  .ivu-table-stripe .ivu-table-body tr, .ivu-table-stripe .ivu-table-fixed-body tr {
      background-color: #ffffff;
  }
  td.ivu-table-expanded-cell {
    padding: 0px;
	}
    .gcontent >>>.ivu-form-item{
        margin: 0;
    }
</style>

<template>
    <div style="background-color:#FFFFFF;overflow-y:auto;overflow-x:hidden;">
        <pheader>
            <template slot="left">用户管理/任务调度</template>
            <div style="text-align: right;margin-right: 18px;" slot="right">
                <Button type="primary" size="small"  v-if="this.$hasPerm('taskAdd')" @click="newadd()">新增</Button>
                <!-- <Input v-model="search_param" search placeholder="请输入任务名称" style="width: auto;"  /> -->
            </div>
        </pheader>

        <div class="gcontent">
        	<Form :label-width="100" label-position="left" style="position:relative;left:4%;padding-top: 10px">
				<Row>
					<Col span="8" >
                        <FormItem label="任务状态:">
                        	<!-- <Input  style="width:70%"/> -->
                        <Select v-model="select.static" @on-change="getTask()" style="width:70%">
                            <Option value=-1>所有任务</Option>
                            <Option value=1>运行中的任务</Option>
                        </Select>
                        </FormItem>
                    </Col>
                </Row>
        	</Form>
        </div>

        <tabContent>
            <template slot="content">
                <Table border :columns="columns" :data="data" :loading="tableLoading">
                    <template slot-scope=" { row, index }" slot="jobTime">
                        <p v-if="row.jobTime != null">{{row.jobTime}}</p>
                    </template>
                </Table>
            </template>
        </tabContent>
        
        <Modal @on-ok="add_ok()" @on-cancel="cancel('add_menu')" v-model="add_menu.show" :mask-closable="false" :loading="loading" :title="'新增任务'" width="720">
            <Form ref="add_menu" :model="add_menu" :rules="ruleInline" label-position="left" :label-width="150">
                <Row>
                    <Col span="23"style="width:97%" >
                        <FormItem label="可运行任务：" prop="taskId">
                            <Select  v-model="add_menu.taskId" >
                                <Option v-for="item in rundata" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="23"style="width:97%" >
                        <FormItem label="任务组：" prop="jobGroupName">
                            <Input v-model="add_menu.jobGroupName" />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="23"style="width:97%" >
                        <FormItem label="任务名称：" prop="jobName">
                            <Input v-model="add_menu.jobName" />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="23"style="width:97%" >
                        <FormItem label="备注：">
                            <Input v-model="add_menu.description" />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="23"style="width:97%" >
                        <FormItem label="调度时间：" prop="jobTime">
                            <input-cron type="text" v-model="add_menu.jobTime"
                                placeholder="请输入cron表达式(http://www.easysb.cn)"/>
                        </FormItem>
                    </Col>
                </Row>

            </Form>
        </Modal>

    </div>
</template>

<script>
  import mpage from "../comp_chatter/mpage"
  import pheader from "../comp_chatter/pheader"
  import mheader from "../comp_chatter/mheader"
  import mcontainer from "../comp_chatter/mcontainer"
  import Axios from 'axios'
  import ajax from "../ajax_util"
  import inputSearch from '../base/input_search'
  import tabContent from "../comp_chatter/tab_content.vue"
  import InputCron from '../easy-cron/input-cron'

  export default{
    components: {
        mpage,mheader,mcontainer,pheader,inputSearch,tabContent,InputCron
    },
    data() {
        
        return{
            tableLoading: false,
            loading: true,
            data:[],
            rundata:[],
            search_param:"",
            select:{
                static:"",
            },
            add_menu:{
                show:false,
                taskId:"",
                jobGroupName:"",
                jobName:"",
                jobTime:"",
                description:"",
            },
            ruleInline: {
                jobName: [
                    { required: true, message: '请输入jobName.', trigger: 'blur' }
                ],
                taskId: [
                    { required: true, message: '请选择taskId.', trigger: 'Number' }
                ],
                jobGroupName: [
                    { required: true, message: '请输入jobGroupName.', trigger: 'blur' }
                ],
                jobTime: [
                    { required: true, message: '请输入jobTime.', trigger: 'blur' }
                ]
            },
        }
    },
    computed: {
        columns() {
            let columns = [];
            columns.push({
                title: '序号',
                type: 'index',
                width: 80,
                align: 'center',
                render: (h, params) => {
                    return h('span', params.index + (this.page - 1) * this.pageSize + 1);
                }
            });
            columns.push({
                title: '任务组',
                key: 'jobGroupName',
                align: 'center',
                minWidth: 50
            });
            columns.push({
                title: '任务名称',
                align: 'center',
                key: 'jobName',
                maxWidth: 140
            });
            columns.push({
                title: '备注',
                key: 'description',
                align: 'center',
                minWidth: 100,
                maxWidth: 130
            });
            columns.push({
                title: '任务状态',
                align: 'center',
                key: 'jobStatus',
                maxWidth: 140
            });
            columns.push({
                title: '调度时间',
                align: 'center',
                slot: 'jobTime',
                maxWidth: 210
            });
            if (this.$hasPerm('taskPause') || this.$hasPerm('taskDelete') || this.$hasPerm('taskResume') || this.$hasPerm('taskStart')) {
                columns.push({
                    title: '操作',
                    key: 'action',
                    width: 320,
                    align: 'center',
                    render: (h, params) => {
                    let button = [];
                    if (this.$hasPerm('taskPause')) {
                        button.push(
                        h('Button', {
                            props: {
                            type: 'error',
                            size: 'small'
                            },
                            style: {
                            marginRight: '5px'
                            },
                            on: {
                            click: () => {
                                this.pause(params)
                            }
                            }
                        }, '暂停')
                        );
                    }
                    if (this.$hasPerm('taskDelete')) {
                        button.push(
                        h('Button', {
                            props: {
                            type: 'error',
                            size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                            click: () => {
                                this.taskdelete(params)
                            }
                            }
                        }, '删除')
                        );
                    }
                    if (this.$hasPerm('taskResume')) {
                        button.push(
                        h('Button', {
                            props: {
                            type: 'primary',
                            size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                            click: () => {
                                this.resume(params)
                            }
                            }
                        }, '恢复')
                        );
                    }
                    if (this.$hasPerm('taskStart')) {
                        button.push(
                        h('Button', {
                            props: {
                            type: 'primary',
                            size: 'small'
                            },
                            on: {
                            click: () => {
                                this.start(params)
                            }
                            }
                        }, '运行')
                        );
                    }
                    return h('div', button);
                    }
                });
                }
            return columns;
        },
    },
    mounted() {
        this.select.static = '-1';
        this.getTask();
        this.getRun();
    },
    methods:{
        getCron(cron){
            var parser = require('cron-parser');
            var interval = parser.parseExpression(cron);
            return interval.next().toString()
        },
        getRun(){
            var that = this;
            var url = this.CONFIG.scheduling_url + '/tasks' 
            ajax.get({
                url: url,
                that: that,
                params:null,
                success:function(data) {
                    console.log('data',data)
                    that.rundata = data
                }
            })
        },
        getTask(){
            console.log('this.select.static',this.select.static)
            if (this.select.static === '-1') {
                console.log('-1')
                var that = this;
                var url = this.CONFIG.scheduling_url + '/jobs' 
                ajax.get({
                    url: url,
                    that: that,
                    params:null,
                    success:function(data) {
                        console.log('data',data)
                        that.data = data
                    }
                })
            }
            if (this.select.static === '1') {
                console.log('1')
                var that = this;
                var url = this.CONFIG.scheduling_url + '/runing-jobs' 
                ajax.get({
                    url: url,
                    that: that,
                    params:null,
                    success:function(data) {
                        console.log('data',data)
                        that.data = data
                    }
                })
            }
        },
        newadd(){
            console.log('新增')
            this.add_menu.show = true
        },
        add_ok(){
            console.log('this.add_menu',this.add_menu)
            var that = this;
            var url = this.CONFIG.scheduling_url + '/job'

            var jobModel = {}
            jobModel['taskId'] = this.add_menu.taskId
            jobModel['jobGroupName'] = this.add_menu.jobGroupName 
            jobModel['jobName'] = this.add_menu.jobName
            jobModel['jobTime'] = this.add_menu.jobTime
            jobModel['description'] = this.add_menu.description
            console.log('jobModel',jobModel)

            ajax.post({
              url: url,
              that: that,
              data: jobModel,
              success: function(data) {
                that.$Notice.success({
                  title: '成功新建任务'
                });
                that.add_menu.show = false;
                that.cancel('add_menu');
                that.select.static = '-1';
                that.getTask();
              }
            })
        },
        
        cancel(name){
            this.$refs[name].resetFields();
        },

        pause(params){
            console.log('暂停',params.row)
            var jm = {}
            jm['jobGroupName'] = params.row.jobGroupName
            jm['jobName'] = params.row.jobName
            var that = this;
            var url = this.CONFIG.scheduling_url + '/pause-job'
            ajax.post({
              url: url,
              that: that,
              data: jm,
              success: function(data) {
                that.$Notice.success({
                  title: '已暂停该任务'
                });
				that.getTask()
              }
            })
        },

        taskdelete(params){
            console.log('删除',params.row)
            var jm = {}
            jm['jobGroupName'] = params.row.jobGroupName
            jm['jobName'] = params.row.jobName
            var that = this;
            var url = this.CONFIG.scheduling_url + '/delete-job'
            ajax.post({
              url: url,
              that: that,
              data: jm,
              success: function(data) {
                that.$Notice.success({
                  title: '已删除该任务'
                });
                that.getTask()
              }
            })
        },

        start(params){
            console.log('运行',params.row)
            var jm = {}
            jm['jobGroupName'] = params.row.jobGroupName
            jm['jobName'] = params.row.jobName
            var that = this;
            var url = this.CONFIG.scheduling_url + '/start-job'
            ajax.post({
              url: url,
              that: that,
              data: jm,
              success: function(data) {
                that.$Notice.success({
                  title: '已运行该任务'
                });
				that.getTask()
              }
            })
        },

        resume(params){
            console.log('恢复',params.row)
            var jm = {}
            jm['jobGroupName'] = params.row.jobGroupName
            jm['jobName'] = params.row.jobName
            var that = this;
            var url = this.CONFIG.scheduling_url + '/resume-job'
            ajax.post({
              url: url,
              that: that,
              data: jm,
              success: function(data) {
                that.$Notice.success({
                  title: '已恢复该任务'
                });
				that.getTask()
              }
            })
        },
    }

  }

</script>